<style>
    .notice-bar{
        display: flex;
        align-items: center;
        color: #ed6a0c;
        font-size: 14px;
        height: 40px;
        line-height: 24px;
        padding: 0 16px;
    }
    .notice-bar--withicon{
        padding-right:40px;
        position:relative;
    }
    .notice-bar--wrapable{
        height:auto;
        padding:8px 16px
    }
    .notice-bar--wrapable .notice-bar__wrap{
        position: relative;
        white-space: nowrap;
    }
    .notice-bar__left-icon {
        display: flex;
        align-items: center;
        margin-right: 4px;
        vertical-align: middle;
    }
    .notice-bar__left-icon {
        font-size: 16px;
        min-width: 22px;
    }

    .notice-bar__left-icon,.notice-bar__right-icon img{
        width: 1em;
        height: 1em;
    }
    .notice-bar__wrap{
        flex: 1;
        height: 24px;
        overflow: hidden;
        position: relative;
    }
    .notice-bar__content{
        position: absolute;
        white-space: nowrap;
        /* animation: noticeBar_content linear 4s infinite; */
    }
    @keyframes noticeBar_content {
        from {
            left : 100%;
        }
        to {
            left: -100%;
        }
    }
</style>
{if $ad_info['ad_mq_top']['status']}
<div class="notice-bar notice-bar--withicon notice-bar--wrapable" {if $ad_info['ad_mq_top']['adimg'] }style="background-image: url({$ad_info['ad_mq_top']['adimg']})"{/if}
{if !$ad_info['ad_mq_top']['adimg'] && $ad_info['ad_mq_top']['other']['ad_mq_bg_color'] }style="background-color: {$ad_info['ad_mq_top']['other']['ad_mq_bg_color']}"{/if} >
    <div class="notice-bar__left-icon">
        <img src="{$ad_info['ad_mq_top']['other']['ad_mq_icon']}"></img>
    </div>
    <div class="notice-bar__wrap">
        <div class="notice-bar__content" style="color: {$ad_info['ad_mq_top']['other']['ad_mq_txt_color']};font-size: {$ad_info['ad_mq_top']['other']['ad_mq_txt_size']}px;">
            {$ad_info['ad_mq_top']['other']['ad_mq_txt']}
        </div>
    </div>
</div>
{elseif $ad_info['ad_mq_bottom']['status']}
<div class="notice-bar notice-bar--withicon notice-bar--wrapable" {if $ad_info['ad_mq_bottom']['adimg'] }style="background-image: url({$ad_info['ad_mq_bottom']['adimg']})"{/if}
{if !$ad_info['ad_mq_bottom']['adimg'] && $ad_info['ad_mq_bottom']['other']['ad_mq_bg_color'] }style="background-color: {$ad_info['ad_mq_bottom']['other']['ad_mq_bg_color']}"{/if} >
    <div class="notice-bar__left-icon">
        <img src="{$ad_info['ad_mq_bottom']['other']['ad_mq_icon']}"></img>
    </div>
    <div class="notice-bar__wrap">
        <div class="notice-bar__content" style="color: {$ad_info['ad_mq_bottom']['other']['ad_mq_txt_color']};font-size: {$ad_info['ad_mq_bottom']['other']['ad_mq_txt_size']}px;">
            {$ad_info['ad_mq_bottom']['other']['ad_mq_txt']}
        </div>
    </div>
</div>
{/if}

<script>
    // notice-bar animation
    const notic_wraper = $('.notice-bar__wrap');
    const notic_content = $('.notice-bar__content');
    const wraperWidth = notic_wraper.width();
    const contentWidth = notic_content.width();
    (function init() {
        notic_content.css('left', `${wraperWidth}px`);
        notic_content.animate({left: `-${contentWidth}px`}, 8000, 'linear', init);
    })()
</script>
